/*
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2023-01-26 19:22:38
 * @LastEditTime: 2024-06-23 01:41:48
 * @Description: uno css
 */
import { presetUno, defineConfig } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
// 样式查询：https://uno.antfu.me/
// eslint-disable-next-line no-useless-escape
export default defineConfig({
  presets: [
    presetUno(),
    presetRemToPx({
      baseFontSize: 4
    })
  ], // 使用自带的内部预设， 按需引用
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      center: 'flex justify-center items-center',
      ellipsis: 'truncate',
      column: 'flex flex-col flex-nowrap'
    }
  ],
  rules: [
    [
      'fit',
      {
        height: '100%',
        width: '100%'
      }
    ],
    [
      'full-w',
      {
        width: '100%'
      }
    ],
    [
      'full-h',
      {
        height: '100%'
      }
    ],
    [
      'col',
      {
        width: 'auto',
        'min-width': '0',
        'max-width': ' 100%',
        flex: '10000 1 0%'
      }
    ],
    [
      'col-auto',
      {
        width: 'auto',
        'min-width': '0',
        'max-width': ' 100%',
        flex: '0 0 auto'
      }
    ],
    [
      'w-col',
      {
        width: 'auto',
        'min-width': '0',
        'max-width': ' 100%',
        flex: '10000 1 0%'
      }
    ],
    [
      'w-col-auto',
      {
        width: 'auto',
        'min-width': '0',
        'max-width': ' 100%',
        flex: '0 0 auto'
      }
    ],
    [
      'h-col',
      {
        height: 'auto',
        'min-height': '0',
        'max-height': ' 100%',
        flex: '10000 1 0%'
      }
    ],
    [
      'h-col-auto',
      {
        height: 'auto',
        'min-height': '0',
        'max-height': ' 100%',
        flex: '0 0 auto'
      }
    ],
    [
      /^line-height-([0-9]+)$/,
      ([, d]) => ({
        'line-height': `${+d}px`
      })
    ],
    [
      // h-ca-100-20 就是 height:calc(100% - (20/37.5) rem);w-ca-100-20 就是 width:calc(100% -  (20/37.5) rem)
      // h-ca-100-20px 就是 height:calc(100% - 20px)
      /^([wh])-ca-([0-9]+)-([0-9]+)(.*)$/,
      ([, d, c, f, e]) =>
        d === 'w'
          ? {
            width: `calc(${c}% - ${e ? f : (+f)}${
              e || 'px'
            })`
          }
          : {
            height: `calc(${c}% - ${e ? f : (+f)}${
              e || 'px'
            })`
          }
    ]
  ]
})
